import React, { Component } from 'react'
import { Carousel, Flex, Grid, NavBar, Icon } from 'antd-mobile';
import { getSwipers, getGroups, getNews, getInfo } from '../../api/home'
import {getCurrentCity} from '../../utils/index'
import './index.css'

const navs = [
    {
        id: 1,
        title: '整租',
        path: '/home/list'
    },
     {
        id: 2,
        title: '合租',
        path: '/home/list'
    },
      {
        id: 3,
        title: '地图找房',
        path: '/home/list'
    },
       {
        id: 4,
        title: '出租',
        path: '/home/list'
    },
]
export default class Index extends Component{
    state = {
        swipers: [],
        isSwiperLoaded: false,
        // 小组数据
        groups: [],
        // 最新资讯
        news: [],
        cityName: ''
    }
    // 获取轮播图数据
    async getSwipers() {
        const res = await getSwipers()
        this.setState(() => {
            return {
                swipers: res.data.body,
                isSwiperLoaded: true
            }
        })
    }
    // 获取租房小组数据的方法
    async getGroups() {
        const {data} = await getGroups({
            area: 'AREA%7C88cff55c-aaa4-e2e0'
        })
        this.setState({
            groups: data.body
        })
    }
    // 获取最新资讯
    async getNews() {
        const res = await getNews({
            area: 'AREA%7C88cff55c-aaa4-e2e0'
        })
        this.setState({
            news: res.data.body
        })
    }
    // 通过Ip定位获取当前城市名称
    async getLocalCity() {
        const city = await getCurrentCity()
        this.setState({
            cityName: city.label
        })
        
    }
    componentDidMount() {
        this.getSwipers()
        this.getGroups()
        this.getNews()
        this.getLocalCity();
    }
    // 渲染轮播图
    renderSwipers() {
        return this.state.swipers.map((item) => (
                        <a
                key={item.id}
                style={{height: 212}}
                        >
                        <img
                            src={`http://localhost:8009${item.imgSrc}`}
                            alt=""
                            style={{ width: '100%', verticalAlign: 'top' }}
                        />
                        </a>
                    ))
    }
    renderNavs() {
        return navs.map(item => (
            <Flex.Item key={item.id} onClick={
                () => this.props.history.push(item.path)
            }>
                <i className="iconfont icon-shouye1"></i>
                <h3>{item.title}</h3>
            </Flex.Item>
        ))
    }
    render() {
        return (
            <div className="index">
                {/* 轮播图 */}
                <div className="swiper">
                    {
                        this.state.isSwiperLoaded ?
                            <Carousel
                                autoplay
                                infinite
                            >
                                {this.renderSwipers()}
                            </Carousel> : ''
                    }
                    <NavBar
                        className="search"
                        mode="dark"
                        leftContent={this.state.cityName}
                        onLeftClick={() => this.props.history.push('/cityList')}
                        rightContent={[
                            <Icon key="1" type="ellipsis" onClick={() => this.props.history.push('/map')} />,
                        ]}
                    >搜索<Icon key="0" type="search" style={{ marginRight: '16px' }} /></NavBar>
               </div>
                

                {/* 导航菜单 */}
                <Flex className="nav">
                    {this.renderNavs()}
                </Flex>

                {/* 租房小组 */}
                <div className="group">
                    <h3 className="title">租房小组<span className="more">更多</span></h3>
                    {/* 宫格组件 */}
                    <Grid
                        data={this.state.groups}
                        columnNum={2}
                        square={false}
                        hasLine={false}
                        renderItem={(item) => (
                        <Flex className="group-item" justify="around" key={item.id}>
                            <div className="desc">
                                <p className="title">{item.title}</p>
                                <span className="info">{item.desc}</span>
                            </div>
                            <img src={`http://localhost:8009${item.imgSrc}`}/>
                        </Flex>
                        )} />
                    
                    {/* 最新资讯 */}
                </div>
            </div>
         );
    }
}